<template>
  <div class="tabList">
    <ul class="listBox">
      <li v-for="(list,index) in message" :key="index" @click="goPath(list.path)">
        <img :src="list.imgSrc" alt="">
        <p style="margin-top:.03rem;">{{list.Text}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    props:{
      message:{
      type:Array
    }
  }, 
  data(){
    return{

    }
  },
  created(){
    console.log(this.message)
  },
  methods:{
    goPath(path){
      window.location.href = path
    }
  }
}
</script>
<style scoped>
  .tabList{
    margin-top: .6rem;
  }
  .listBox{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .listBox li{
     width: 25%;
     font-weight: lighter;
     margin-bottom: .3rem;
     text-align: center;
  }
  .listBox li img{
     width:.6rem;
     height:.6rem;
  }
</style>